<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Widgets in Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Qt, Qyoto, C#">
<meta name="description" content="In this chapter of the Qyoto tutorial, we will
cover various widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in Qyoto</h1>

<p>
In this part of the Qyoto C# programming tutorial, we will cover Qyoto widgets. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Over the years, several 
widgets became a standard in all toolkits on all OS platforms. For example a 
button, a check box or a scroll bar. Qyoto has a rich set of widgets which cover 
most of the programming needs. More specialized widgets can be created as custom 
widgets. 
</p>


<h2>QCheckBox</h2>

<p>
The <code>QCheckBox</code> is a widget, that has two states. On and Off. The On 
state is visualized by a check mark. It is used to denote some boolean property. 
The QCheckBox widget provides a checkbox with a text label.
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses QCheckBox
 * widget to show/hide the title
 * of the window.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "QCheckBox";
       
        SetupUI();

        Resize(250, 150);
        Move(300, 300);
        Show();
    }    

    public void SetupUI() 
    {       
        QCheckBox cb = new QCheckBox("Show Title", this);
        cb.Checked = true;
        cb.Move(50, 50);
        
        cb.StateChanged += ShowTitle;
    }
    
    [Q_SLOT]
    public void ShowTitle(int state) 
    {
        if (state == (int) CheckState.Checked) 
        {
            WindowTitle = "QCheckBox";
        } else {
            WindowTitle = "";
        }
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In our example, we place a check box on the window. The check box shows/hides 
the title of the window. 
</p>

<pre class="explanation">
WindowTitle = "QCheckBox";
</pre>

<p>
During the construction of the window, we set a title for the window. 
</p>

<pre class="explanation">
QCheckBox cb = new QCheckBox("Show Title", this);
</pre>

<p>
The <code>QCheckBox</code> widget is created. The first parameter of the 
constructor is its text label. The second parameter is the parent widget. 
</p>

<pre class="explanation">
cb.Checked = true;
</pre>

<p>
The title is visible at the start of the application. So the check box must
be checked too. We make the check box checked through the <code>Checked</code>
property.
</p>

<pre class="explanation">
cb.StateChanged += ShowTitle;
</pre>

<p>
We plug the <code>ShowTitle()</code> method to the <code>StateChange</code> 
event. The event is emitted when the state of a check box changes. 
</p>

<pre class="explanation">
[Q_SLOT]
public void ShowTitle(int state) 
{
   ...
}
</pre>

<p>
The method definition is preceded by a <code>Q_SLOT</code> attribute. This 
attribute informs a compiler about a custom slot.
</p>

<pre class="explanation">
if (state == (int) CheckState.Checked) 
{
    WindowTitle = "QCheckBox";
} else {
    WindowTitle = "";
}
</pre>

<p>
Depending on the state of the check box, we show or hide the title of the 
window. 
</p>

<img src="/img/gui/sharpqyoto/qcheckbox.png" alt="QCheckBox">
<div class="figure">Figure: QCheckBox</div>


<h2>QLabel</h2>

<p>
The <code>QLabel</code> widget is used to display text or image. No user 
interaction is available.
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses QLabel to 
 * show lyrics of a song.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "You know I'm no Good";

        InitUI();

        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    
    public void InitUI() 
    {
           string text = @"Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good";

        QLabel label = new QLabel(text, this);
        label.Font = new QFont("Purisa", 9);

        QVBoxLayout vbox = new QVBoxLayout();
        vbox.AddWidget(label);
        Layout = vbox;
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
Our example shows lyrics of a song in the window. 
</p>

<pre class="explanation">
string text = @"Meet you downstairs in the bar and heard
...
</pre>

<p>
We define a multi line text. Multiline texts are preceded by the @ character
in C# language. 
</p>

<pre class="explanation">
QLabel label = new QLabel(text, this);
label.Font = new QFont("Purisa", 9);
</pre>

<p>
We create the label widget and change its font. 
</p>

<pre class="explanation">
QVBoxLayout vbox = new QVBoxLayout();
vbox.AddWidget(label);
Layout = vbox;
</pre>

<p>
Instead of manually coding the position and size of the
label, we put the label into a box layout. 
</p>


<img src="/img/gui/sharpqyoto/qlabel.png" alt="QLabel">
<div class="figure">Figure: QLabel</div>


<h2>QLineEdit</h2>

<p>
The <code>QLineEdit</code> is a widget that allows to enter and edit a single 
line of plain text. There are undo/redo, cut/paste and drag &amp; drop functions 
available for QLineEdit widget. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program shows text
 * which is entered in a QLineEdit
 * widget in a QLabel widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{
    QLabel label;
    
    public QyotoApp() 
    {
        WindowTitle = "QLineEdit";
        
        InitUI();

        Resize(250, 150);
        Move(400, 300);
        Show();
    }    

    public void InitUI() 
    {        
        label = new QLabel(this);

        QLineEdit edit = new QLineEdit(this);
        edit.TextChanged += OnChanged;
        
        edit.Move(60, 100);
        label.Move(60, 40);
    }
    
    [Q_SLOT]
    public void OnChanged(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }

    [STAThread]
    public static int Main(string[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In our example we show two widgets. A line edit and a label widget. The text
entered into the line edit is shown in the label widget. 
</p>

<pre class="explanation">
QLineEdit edit = new QLineEdit(this);
</pre>

<p>
The <code>QLineEdit</code> widget is created. 
</p>

<pre class="explanation">
edit.TextChanged += OnChanged;
</pre>

<p>
When we type or delete some text from the line edit, the 
<code>OnChanged()</code> method is triggered. The method takes a string 
parameter. 
</p>

<pre class="explanation">
[Q_SLOT]
public void OnChanged(string text) 
{
    label.Text = text;
    label.AdjustSize();
}
</pre>

<p>
In the <code>OnChanged()</code> method, we set the contents of the line edit to 
the label widget. The <code>AdjustSize()</code> method ensures, that all text is 
visible. 
</p>

<img src="/img/gui/sharpqyoto/qlineedit.png" alt="QLineEdit widget">
<div class="figure">Figure: QLineEdit widget</div>


<h2>Toggle buttons</h2>

<p>
Toggle buttons are push buttons with a checkable flag set. Toggle button is a 
button that has two states. Pressed and not pressed. You toggle between these 
two states by clicking on it. There are situations where this functionality 
fits well. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses toggle buttons to
 * change the background colour of
 * a widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
    QWidget square;
    QColor col;

    QPushButton redb;
    QPushButton greenb;
    QPushButton blueb;

    public QyotoApp() 
    {
        WindowTitle = "Toggle buttons";
        
        InitUI();

        Resize(350, 240);
        Move(400, 300);
        Show();
    }
    
    private void InitUI() 
    {
        col = new QColor();

        redb = new QPushButton("Red", this);
        redb.Checkable = true;
        greenb = new QPushButton("Green", this);
        greenb.Checkable = true;
        blueb = new QPushButton("Blue", this);
        blueb.Checkable = true;

        redb.Toggled += OnToggled;
        greenb.Toggled += OnToggled;
        blueb.Toggled += OnToggled;
       
        square = new QWidget(this);
        square.StyleSheet = "QWidget { background-color: black }";

        redb.Move(30, 30);
        greenb.Move(30, 80);
        blueb.Move(30, 130);
        square.SetGeometry(150, 25, 150, 150);
    }

    [Q_SLOT]
    public void OnToggled(bool @checked) 
    {
        int red = col.Red;
        int green = col.Green;
        int blue = col.Blue;
        
        if (redb.Checked) 
        {
            red = 255;
        } else {
            red = 0;
        }
  
        if (greenb.Checked) 
        {
            green = 255;
        } else {
            green = 0;
        }

        if (blueb.Checked) 
        {
            blue = 255;
        } else {
            blue = 0;
        }
        
        col = new QColor(red, green, blue);

        string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
            col.Name());
        square.StyleSheet = sheet;
    }

    [STAThread]    
    public static int Main(string[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In the code example, we use three toggle buttons to change the color
of a rectangular widget. 
</p>

<pre class="explanation">
QWidget square;
QColor color;

QPushButton redb;
QPushButton greenb;
QPushButton blueb;
</pre>

<p>
We define five objects. The square widget is a <code>QWidget</code>, which shows 
the colour. The <code>color</code> variable is used to hold the color value. The 
three buttons are toggle buttons, which are used to mix the colour value. 
</p>

<pre class="explanation">
redb = new QPushButton("Red", this);
redb.Checkable = true;
</pre>

<p>
We create a <code>QPushButton</code> widget. The <code>Checkable</code> property 
changes the push button into a toggle button. 
</p>

<pre class="explanation">
redb.Toggled += OnToggled;
greenb.Toggled += OnToggled;
blueb.Toggled += OnToggled;
</pre>

<p>
All three buttons are plugged into one method call, the <code>OnToggled()</code> 
method.
</p>

<pre class="explanation">
square = new QWidget(this);
square.StyleSheet = "QWidget { background-color: black }";
</pre>

<p>
We create the square widget. At the beginning, it is black. In Qyoto, we use 
style sheets to customize the appearance of a widget. 
</p>

<p>
Inside the <code>OnToggled()</code> method, we determine the colour value and
update the square widget to a new colour. 
</p>

<pre class="explanation">
int red = col.Red;
int green = col.Green;
int blue = col.Blue;
</pre>

<p>
Here we determine the current color of the square widget. 
</p>

<pre class="explanation">
if (redb.Checked) 
{
    red = 255;
} else {
    red = 0;
}
</pre>

<p>
Change the red part of the color, depending on the state of the red toggle 
button.
</p>

<pre class="explanation">
col = new QColor(red, green, blue);
</pre>

<p>
We create a new color value.
</p>

<pre class="explanation">
string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
    col.Name());        
</pre>

<p>
We use the C# Format method to create the appropriate stylesheet. 
</p>

<pre class="explanation">
square.StyleSheet = sheet;
</pre>

<p>
The colour of the square is updated. 
</p>

<img src="/img/gui/sharpqyoto/togglebuttons.png" alt="Toggle buttons">
<div class="figure">Figure: Toggle buttons</div>


<h2>QComboBox</h2>

<p>
The <code>QComboBox</code>  is a widget that allows the user to choose from a 
list of options. It is a selection widget that displays the current item, and 
can pop up a list of selectable items. A combo box may be editable. It presents 
a list of options to the user in a way that takes up the minimum amount of 
screen space.
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses the QComboBox widget.
 * The option selected from the combo box is
 * displayed in the label widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{    
    QLabel label;

    public QyotoApp() 
    {
        WindowTitle = "QComboBox";
        
        InitUI();

        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    
    public void InitUI() 
    {       
        label = new QLabel("Ubuntu", this);
        
        QComboBox combo = new QComboBox(this);
        combo.AddItem("Ubuntu");
        combo.AddItem("Arch");
        combo.AddItem("Fedora");
        combo.AddItem("Red Hat");
        combo.AddItem("Gentoo");
        
        combo.Move(50, 30);
        label.Move(50, 100);
        
        combo.ActivatedString += OnActivated;
    }
    
    [Q_SLOT]
    public void OnActivated(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
In our code example, we have two widgets. A combo box and a label widget. 
The option selected from a combo box is shown in the label. 
</p>

<pre class="explanation">
label = new QLabel("Ubuntu", this);
</pre>

<p>
This is the label, that will show the currently selected option
from the combo box. 
</p>

<pre class="explanation">
QComboBox combo = new QComboBox(this);
</pre>

<p>
We create the instance of the <code>QComboBox</code> widget. 
</p>

<pre class="explanation">
combo.AddItem("Ubuntu");
combo.AddItem("Arch");
combo.AddItem("Fedora");
combo.AddItem("Red Hat");
combo.AddItem("Gentoo");
</pre>

<p>
Combo box is filled with values. 
</p>

<pre class="explanation">
combo.ActivatedString += OnActivated;
</pre>

<p>
When we select an option from the combo box, the <code>OnActivated()</code> 
method is triggered. 
</p>

<pre class="explanation">
[Q_SLOT]
public void OnActivated(string text) 
{
    label.Text = text;
    label.AdjustSize();
}
</pre>

<p>
In the <code>OnActivated()</code> method, we update the label widget to the 
currently selected string from the combo box. 
</p>


<img src="/img/gui/sharpqyoto/qcombobox.png" alt="QComboBox widget">
<div class="figure">Figure: QComboBox widget</div>

<p>
In this part of the Qyoto C# tutorial, we have presented several Qyoto widgets. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 1, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
